<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="/inc/includeHeader.jsp" %>
    <link href="<c:url value="/css/form.css"/>" type="text/css" rel="stylesheet"></link>
	<title>AAA ONG</title>
</head>
<body>

	<%@ include file="/inc/header.jsp" %>
    
    <section id="main-body">
      <h2>Cadastro de Pré-Inscrito</h2>
      <p class="notice">${noticeMessage}</p>
      
      <p class="errors-container">
        <c:if test="${not empty errors}">
          <p class="error message">Alguns dados estão incorretos, por favor, corrija os seguintes problemas:</p>
        </c:if>
        <ul class="errors">
          <c:forEach items="${errors}" var="error">
            <li>${error.message}</li>
          </c:forEach>
        </ul>
      </p>
    
      <form action='<c:url value="/pre-inscritos/" />' method="POST">
        <p class="numero-de-inscricao">
          <label for="form.numeroDeInscricao">Nº de Inscrição</label>
          <input type="text" name="form.numeroDeInscricao" value="${form.numeroDeInscricao}"></input>
        </p>
        
        <p class="indicacao">
          <label for="form.indicacao">Indicação</label>
          <input type="text" name="form.indicacao" value="${form.indicacao}"></input>
        </p>
  
        <p class="data-da-inscricao">
          <label for="form.dataDaInscricao">Data da Inscrição</label>
          <input placeholder="dd/mm/aaaa" type="text" name="form.dataDaInscricao" value="${form.dataDaInscricao}"></input>
        </p>
        
        <p class="name">
          <label for="form.name">Name</label>
          <input type="text" name="form.name" value="${form.name}"></input>
        </p>
        
        <p class="data-nascimento">
          <label for="form.dataNascimento">Data de Nascimento</label>
          <input placeholder="dd/mm/aaaa" type="text" name="form.dataNascimento" value="${form.dataNascimento}"></input>
        </p>
        
        <fieldset>
          <legend>Endereço</legend>
          
          <p class="logradouro">
            <label for="form.logradouro">Logradouro</label>
            <input type="text" name="form.logradouro" value="${form.logradouro}"></input>
          </p>
          
          <p class="numero-endereco">
            <label for="form.numeroEndereco">Número</label>
            <input type="text" name="form.numeroEndereco" value="${form.numeroEndereco}"></input>
          </p>
          
          <p class="bairro">
            <label for="form.bairro">Bairro</label>
            <input type="text" name="form.bairro" value="${form.bairro}"></input>
          </p>
          
          <p class="cidade">
            <label for="form.cidade">Cidade</label>
            <input type="text" name="form.cidade" value="${form.cidade}"></input>
          </p>
          
          <p class="estado">
            <label for="form.estado">Estado</label>
            <input type="text" name="form.estado" value="${form.estado}"></input>
          </p>
          
          <p class="pais">
            <label for="form.pais">País</label>
            <input type="text" name="form.pais" value="${form.pais}"></input>
          </p>
          
          <p class="ponto-referencia">
            <label for="form.pontoReferenciaEndereco">Ponto de Referência</label>
            <input type="text" name="form.pontoReferenciaEndereco" value="${form.pontoReferenciaEndereco}"></input>
          </p>
          
          <p class="cep">
            <label for="form.cep">CEP</label>
            <input placeholder="00000-000" type="text" name="form.cep" value="${form.cep}"></input>
          </p>
        </fieldset>
        
        <p class="telefones">
          <label for="form.telefones">Telefones</label>
          
          <c:forEach begin="0" end="2" var="i">
            <p class="telefone">
              <label>Número</label>
              <input placeholder="(00)0000-0000" type="text" name="form.telefones[${i}].numero" value="${form.telefones[i].numero}"></input>
              <label>Responsável</label>
              <input type="text" name="form.telefones[${i}].responsavel" value="${form.telefones[i].responsavel}"></input>
            </p>
          </c:forEach>
        </p>
        
         <p class="celulares">
          <label for="form.celulares">Celulares</label>
          
          <c:forEach begin="0" end="2" var="i">
            <p class="celular">
              <label>Número</label>
              <input placeholder="(00)&lt;9&gt;0000-0000" type="text" name="form.celulares[${i}].numero" value="${form.celulares[i].numero}"></input>
              <label>Responsável</label>
              <input type="text" name="form.celulares[${i}].responsavel" value="${form.celulares[i].responsavel}"></input>
            </p>
          </c:forEach>
        </p>
        
        <p class="instituicao-ensino">
          <label for="form.instituicaoDeEnsino">Instituição de ensino</label>
          <input type="text" name="form.instituicaoDeEnsino" value="${form.instituicaoDeEnsino}"></input>
        </p>
        
        <p class="turno-escolar">
          <label for="form.turnoEscolar">Turno Escolar</label>
          <select name="form.turnoEscolar">
            <c:forEach items="${turnoOptions}" var="option">
              <option value="${option.value}"
                <c:if test="${option.value == form.turnoEscolar}">
                  selected
                </c:if>
              >${option.label}</option>
            </c:forEach>
          </select>
        </p>
        
        <p class="nivel-escolar">
          <label for="form.nivelEscolar">Nível Escolar</label>
          <select name="form.nivelEscolar" value="${form.nivelEscolar}">
            <option value="">- - -</option>
            <c:forEach items="${nivelEscolarOptions}" var="option">
              <option value="${option.value}"
                <c:if test="${option.value == form.nivelEscolar}">
                  selected
                </c:if>
              >${option.label}</option>
            </c:forEach>
          </select>
        </p>
        
        <fieldset disabled class="escolaridade-basico-fields">
          <legend>Ensino Básico</legend>
          
          <p class="serie-basico">
            <label for="form.serieBasico">Série</label>
            <input type="text" name="form.serieBasico" value="${form.serieBasico}"></input>
          </p>
        </fieldset>
        
        <fieldset disabled class="escolaridade-superior-fields">
          <legend>Ensino Superior</legend>
          
          <p class="periodo">
            <label for="form.periodo">Periodo</label>
            <input type="text" name="form.periodo" value="${form.periodo}"></input>
          </p>
          
          <p class="curso-superior">
            <label for="form.cursoSuperior">Curso</label>
            <input type="text" name="form.cursoSuperior" value="${form.cursoSuperior}"></input>
          </p>
        </fieldset>
           
        <fieldset>
          <legend>Curso Técnico</legend>
          
          <p class="serie-tecnico">
            <label for="form.serieTecnico">Série</label>
            <input type="text" name="form.serieTecnico" value="${form.serieTecnico}"></input>
          </p>
          
          <p class="curso-tecnico">
            <label for="form.cursoTecnico">Curso</label>
            <input type="text" name="form.cursoTecnico" value="${form.cursoTecnico}"></input>
          </p>
        </fieldset>
        
        <input type="submit" value="Criar"></input>
      </form>
     </section> <!-- #main-body -->

  	<%@ include file="/inc/footer.jsp" %>
  	
  	<%@ include file="/inc/includeJs.jsp" %>
      <script src="<c:url value="/js/form.js" />" type="text/javascript"></script>
	</body>
</html>